<template>
    <div>
        <div class="topList">
            <div @click="goLogin">
                <i class="icon iconfont list">&#xe6bc;</i>
            </div>
            
            <span>找回密码</span>
        </div>
        <div class="tipInfo">备注：身份证号一定要正确！手机号、密码可更改</div>
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="inputList">
            <el-form-item prop="IDValue" class="formitemsty">
              <el-input class="elinput"  placeholder="请输入身份证号" v-model="ruleForm.IDValue">
                  <template slot="prepend">身份证号：</template>
              </el-input>
            </el-form-item >
            <el-form-item prop="phoneValue" class="formitemsty">
               <el-input class="elinput"  placeholder="请输入手机号" v-model="ruleForm.phoneValue">
                <template slot="prepend">手&nbsp;机&nbsp;号&nbsp;：</template>
              </el-input>
            </el-form-item >  
            <el-form-item prop="pwdValue" class="formitemsty">
               <el-input type="password" class="elinput" placeholder="请输入新密码" v-model="ruleForm.pwdValue">
                <template slot="prepend">新&nbsp;密&nbsp;码&nbsp;：</template>
               </el-input>
            </el-form-item >    
            <el-form-item prop="rePwdValue" class="formitemsty">
               <el-input type="password" class="elinput" placeholder="再次输入新密码" v-model="ruleForm.rePwdValue">
                <template slot="prepend">确认密码：</template>
               </el-input>
            </el-form-item >    
           <el-button type="primary" @click="submitForm('ruleForm')" class="sureBtn">确定</el-button>
           	<div class="aui-flex aui-flex-clear">
					<div class="aui-flex-box">
                        <div @click="goLogin">
                            重新登陆，<span class="resignBtn">去登录</span>
                        </div>
					</div>
		
				</div>
           </el-form>

        
    </div>
</template>

<script>
export default {
  data() {
    var validatephone = (rule, value, callback) => {
      if (value === "") {
        callback(
          this.$message({
            message: "手机号不能为空！",
            type: "warning"
          })
        );
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(
            this.$message({
              message: "手机号码格式错误，请重新输入！",
              type: "warning"
            })
          );
        } else {
          this.$axios
            .get("/AppLogin/V3", {
              params: {
                phone: value,
                idcard: this.ruleForm.IDValue
              }
            })
            .then(json => {
              if (json.data == "ok") {
                callback();
              } else if (json.data == "sfz") {
                callback(
                  this.$message({
                    message: "身份证号不能为空，请输入！",
                    type: "warning"
                  })
                );
              } else if (json.data == "no") {
                callback(
                  this.$message({
                    message: "手机号已存在，请更换！",
                    type: "warning"
                  })
                );
              }
            });
        }
      }
    };
    var validatecard = (rule, value, callback) => {
      if (value === "") {
        callback(
          this.$message({
            message: "身份证号码不能为空！",
            type: "warning"
          })
        );
      } else {
        var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
        if (!reg.test(value)) {
          callback(
            this.$message({
              message: "身份证号码格式错误，请重新输入！",
              type: "warning"
            })
          );
        } else {
          this.$axios.get("/AppLogin/" + value + "/V2").then(json => {
            if (json.data == "ok") {
              callback();
            } else {
              callback(
                this.$message({
                  message: "身份证号码不存在，无法进行密码找回操作！",
                  type: "warning"
                })
              );
            }
          });
        }
      }
    };
    var validatesurepsw = (rule, value, callback) => {
      if (value === "") {
        callback(
          this.$message({
            message: "请再次输入新密码！",
            type: "warning"
          })
        );
      } else {
        if (this.ruleForm.pwdValue != this.ruleForm.rePwdValue) {
          callback(
            this.$message({
              message: "两次输入的密码不一致，请重新输入！",
              type: "warning"
            })
          );
        } else {
          callback();
        }
      }
    };
    var validatepsw = (rule, value, callback) => {
      if (value === "") {
        callback(
          this.$message({
            message: "请填写密码！",
            type: "warning"
          })
        );
      } else if (value.length < 8) {
        callback(
          this.$message({
            message: "密码长度不能小于8位",
            type: "warning"
          })
        );
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        IDValue: "", //员工身份证号码
        phoneValue: "", //员工手机号码
        pwdValue: "", //密码
        rePwdValue: "" //密码重输
      },
      rules: {
        IDValue: [{ required: true, validator: validatecard, trigger: "blur" }],
        phoneValue: [
          { required: true, validator: validatephone, trigger: "blur" }
        ],
        pwdValue: [{ required: true, validator: validatepsw, trigger: "blur" }],
        rePwdValue: [
          { required: true, validator: validatesurepsw, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var list = {
            St_Phone: this.ruleForm.phoneValue,
            St_Card: this.ruleForm.IDValue,
            St_pwd: this.ruleForm.pwdValue
          };
          this.$axios
            .put("/AppLogin/", list)
            .then(Jsondata => {
              if (Jsondata.data != "no") {
                this.$message({
                  type: "success",
                  message: "更新成功！"
                });
                this.$router.push({
                  path: "/applogin",
                  query: { dtid: localStorage.getItem("dt_id") }
                });
              } else {
                this.$message({
                  type: "error",
                  message: "更新失败，请重试或检查登录状态！"
                });
              }
            })
            .catch(error => {});
        } else {
          return false;
        }
      });
    },
    goLogin() {
      this.$router.push({
        path: "/applogin",
        query: { dtid: localStorage.getItem("dt_id") }
      });
    }
  }
};
</script>

<style>
@font-face {
  font-family: "iconfont"; /* project id 1506859 */
  src: url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.eot");
  src: url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.woff") format("woff"),
    url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1506859_0eqjsn43p8y7.svg#iconfont")
      format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.topList {
  width: 100%;
  text-align: center;
  height: 50px;
  background: black;
  color: white;
  line-height: 50px;
  font-size: 20px;
}
.topList .list {
  float: left;
  color: white;
}
.tipInfo {
  width: 100%;
  height: 45px;
  color: limegreen;
  line-height: 45px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #e5e5e5;
}
.inputList {
  width: 90%;
  margin: 0 auto;
}
.elinput {
  margin: 0.5rem 0;
}
.sureBtn {
  width: 100%;
  margin-top: 1rem;
}
.tipInfo .formitemsty /deep/ .el-form-item__content {
  line-height: 1.5rem !important;
}
.tipInfo .inputList .inputsty /deep/ .el-input__inner {
  border: none;
  height: 30px;
  padding: 0 8px;
}
.tipInfo .formitemsty /deep/ .el-form-item__error {
  display: none;
}
.resignBtn {
  color: red;
}
.aui-flex-box {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #333;
  text-align: center;
  margin-top: 2em;
}
</style>
